import React from 'react';
import { Header } from 'react-native-elements';
import { Image, Text, TouchableOpacity, View, ScrollView } from 'react-native';
import Colors from "../constants/Colors";
import { unitWidth, width, statusBarHeight, titleHeight } from "../constants/AdapterUtil";
import NavigationService from '../constants/NavigationService';

export default class MoreClassification extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            currentPage: 0,
        }
        this.pageCount = 10;
    }

    render() {

        let pageViewList = [];
        let pageIndicatorViewList = [];
        if (this.props.list && this.props.list.length > 0) {
            let pageLength = this.props.list.length / this.pageCount;
            for (let i = 0; i < pageLength; i++) {
                let pageItemViewList = [];
                for (let j = 0; j < this.pageCount && (j + (this.pageCount * i)) < this.props.list.length; j++) {
                    let item = this.props.list[j + (this.pageCount * i)];
                    let key1 = j + (this.pageCount * i);
                    pageItemViewList.push(
                        <TouchableOpacity key={key1} style={{ width: width / 5, height: 70 * unitWidth, alignItems: 'center', justifyContent: 'center', marginTop: 5 * unitWidth }}
                            onPress={() => {
                                this.props.onItemClick ? this.props.onItemClick(item) : null
                            }}>
                            <Image style={{ width: 44 * unitWidth, height: 44 * unitWidth }} source={{ uri: item.icon }} resizeMode='contain' />
                            <Text style={{ fontSize: 13 * unitWidth, color: Colors.color33 }}>{item.navname}</Text>
                        </TouchableOpacity>
                    );
                }
                pageViewList.push(
                    <View key={i} style={{ flexDirection: 'row', flexWrap: 'wrap', width: width, paddingVertical: 7 * unitWidth }}>
                        {pageItemViewList}
                    </View>
                )
                pageIndicatorViewList.push(
                    <View key={i} style={{
                        flexDirection: 'row', flexWrap: 'wrap', backgroundColor: this.state.currentPage == i ? Colors.colorOrange : Colors.colorE8,
                        width: 10 * unitWidth, height: 5 * unitWidth, borderRadius: 10, marginHorizontal: 2 * unitWidth
                    }} />
                )
            }
        }

        return (
            <View style={this.props.style}>
                <ScrollView
                    horizontal={true}
                    pagingEnabled={true}
                    onScroll={event => {
                        this.setState({
                            currentPage: parseInt((event.nativeEvent.contentOffset.x + width / 2) / width)
                        })
                    }}
                    showsHorizontalScrollIndicator={false}>
                    {pageViewList}
                </ScrollView>
                <View style={{ flexDirection: 'row', alignSelf: 'center', marginVertical: 10 * unitWidth }}>
                    {pageIndicatorViewList.length > 1 ? pageIndicatorViewList : null}
                </View>
            </View>
        );
    }
}